
{% block head %}
    <link href="/static/vendor/videojs/css/video-js.css" rel="stylesheet">
{% endblock %}

{% block body %}
<div class="">
      <div class="container-fluid">
          <div class="row justify-content-md-center">
              <div class="col-xl-12 col-sm-12">
                  <div class="player">
                      <video id="video" class="shadow recordedStream video-js vjs-big-play-centered" poster="/videos/{{video.thumbnailLocation}}" {% if isAutoPlay == True %}autoplay{% endif %} controls preload="auto" data-setup='{"fluid": true}'>
                        <source src="{{streamURL}}" type="video/mp4">
                        <p class="vjs-no-js">
                          To view this video please enable JavaScript, and consider upgrading to a web browser that
                          <a href="https://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
                        </p>
                    </video>
                  </div>
              </div>
          </div>
      </div>
</div>


{% endblock %}

{% block scripts %}
    <script src="/static/vendor/videojs/js/video.js"></script>

<script>
  var player = videojs('video', {
            autoplay: {{isAutoPlay}},
            errorDisplay: false,
            liveui: false,
            liveTracker:true,
            html5:
                {
                    nativeAudioTracks: false,
                    nativeVideoTracks:false,
                    hls:
                        {
                            overrideNative: true
                        }
                }
        });
</script>

{% endblock %}